<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>轨迹视角动画暂停与继续</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <style>
      body,
      html,
      #container {
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: "微软雅黑";
      }

      ul li {
        list-style: none;
      }

      .drawing-panel {
        z-index: 10;
        position: fixed;
        bottom: 3.5rem;
        margin-left: 3rem;
        padding: 1rem 1rem;
        border-radius: 0.25rem;
        background-color: #fff;
        box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
      }

      .btn {
        width: 90px;
        height: 30px;
        float: left;
        background-color: #fff;
        color: rgba(27, 142, 236, 1);
        font-size: 14px;
        border: 1px solid rgba(27, 142, 236, 1);
        border-radius: 5px;
        margin: 0 5px;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
      }

      .btn:hover {
        background-color: rgba(27, 142, 236, 0.8);
        color: #fff;
      }
    </style>
    <script src="//mapopen.bj.bcebos.com/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js"></script>
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=z4OGmOGp71v2DGfO4RHOV0F0dZTi1Izp"></script>
  </head>

  <body>
    <div id="container"></div>
    <ul class="drawing-panel" style="z-index: 10">
      <li class="btn" onclick="pauseAni()">暂停</li>
      <li class="btn" onclick="continueAni()">继续</li>
    </ul>
  </body>
</html>

<script>
  function getQueryParams() {
    var url = document.location.toString();
    // 如果url中有特殊字符则需要进行一下解码
    url = decodeURI(url);
    var arr1 = url.split("?");
    var obj = {};
    if (arr1.length > 1) {
      var arr2 = arr1[1].split("&");
      for (var i = 0; i < arr2.length; i++) {
        var curArr = arr2[i].split("=");
        obj[curArr[0]] = decodeURIComponent(curArr[1]);
      }
    }
    return obj;
  }
  var trackPath = JSON.parse(getQueryParams().trackPath || "[]");
  var firstItem = trackPath[0] || { lng: 116.403963, lat: 39.915119 };
  var bmap = new BMapGL.Map("container");
  bmap.centerAndZoom(new BMapGL.Point(firstItem.lng, firstItem.lat), 17);
  bmap.enableScrollWheelZoom(true);
  var path = trackPath;
  var point = [];
  for (var i = 0; i < path.length; i++) {
    point.push(new BMapGL.Point(path[i].lng, path[i].lat));
  }
  var pl = new BMapGL.Polyline(point);
  setTimeout("start()", 2000);
  trackAni = new BMapGLLib.TrackAnimation(bmap, pl, {
    overallView: true,
    tilt: 30,
    duration: 20000,
    delay: 300,
  });
  function start() {
    trackAni.start();
  }
  function pauseAni() {
    trackAni.pause();
  }
  function continueAni() {
    trackAni.continue();
  }
</script>
